<template>
	<view class="orderSubmit">
		<orderItem :dishesData="orderList" :tabledetail="tabledetail" @getinfo="getinfo" :totalfee="orderData.money"></orderItem>
		<view class="orderSubmit-submit">
			<text>金额￥{{ gettablefee }}</text>
			<text @tap="masks()">立即支付</text>
		</view>
		<!-- 密码框 -->
		<view v-if="mask" style="width: 100vw;height: 100vh;position:fixed;background: rgba(0,0,0,0.4);top: 0;z-index: 9999;overflow: hidden;">
			<view :class="bott" class="masks">
				<view style="padding: 0 3%;">
					<view @tap="maskss()" style="float: left;font-size: 60upx;margin: -10upx 0 0 0;">×</view>
					<view style="text-align: center;font-size:30upx;padding-top: 3%;">请输入支付密码</view>
				</view>
				<view style="display: flex;width: 80%;margin:5% auto;text-align: center;">
					<view v-for="(item , index) in pasList" :key='index' style="flex: 1 1 0;">
						<view style="width: 80upx;height: 80upx;border: 1px solid#ccc;margin: auto;line-height:1;">
							<text v-if="passwordArray.length > index" style="font-size:80upx;position: relative;top: -8upx;">●</text>
						</view>
					</view>
				</view>
				<view style="display: flex;flex-wrap: wrap;text-align: center;">
					<view v-for="(num , indexs) in numbr " :key='indexs' @tap="passwordBox(num)" hover-class="hover" :hover-stay-time='20' class="password">
						{{num}}
					</view>
					<view @tap="reset()" class="password" style="background: #09BB07;color: #fff;">重置</view>
					<view @tap="passwordBox(0)" hover-class="hover" :hover-stay-time='20' class="password">0</view>
					<view @tap="backspace()" class="password" style="background: #09BB07;color: #fff;">删除</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import orderItem from '../../components/orderItem.vue';
import { mapState,mapMutations } from 'vuex';
export default {
	components: {
		orderItem
	},
created() {
	console.log(this.orderList,'sdd');
},
	computed: {
		...mapState(['orderList','orderData','tabledetail']),
		gettablefee(){
			return this.orderData.money+this.tablefee
		}
	},
	data(){
		return {
			salecountparam:{
				orderlist:[]
			},
			orderparam:{},
			tablefee:0,
			password: '',
			mask: false,
			passwordArray: [],
			bott: '',
			pasList: ['', '', '', '', '', ''],
			numbr: [1, 2, 3, 4, 5, 6, 7, 8, 9]
		}
	},
	methods: {
		...mapMutations(['CLEAN_DISHES', 'CLEAN_TABLE']),
		getinfo(val){
			console.log(val,'歘回来的值')
			this.orderparam=val
			this.tablefee=val.tablefee
			console.log(this.tablefee,'this.tablefee');
			this.orderparam.price=this.orderData.money+val.tablefee
			
		},
		handleSubmit() {
			uni.reLaunch({
				url: '../orderDetail/index'
			});
		},
		// 密码框
		passwordBox(num) {
			if (this.passwordArray.length < 6) {
				this.passwordArray.push(num)
			}
			if (this.passwordArray.length == 6) {
				var str = ''
				for (let i = 0; i < this.passwordArray.length; i++) {
					str += this.passwordArray[i];
				}
				this.password = str
				this.mask = false
				this.passwordArray = []
				this.bott = ''
				console.log(this.password);
				this.$u.post('/order/pay',{password:this.password}).then(res=>{
					uni.showLoading({
						title: '支付中...'
					});
					console.log(res);
					if(res.data.code==200){
						this.salecountparam.orderlist=this.orderList
							this.$u.post('/dishes/addsalecount',this.salecountparam).then(res=>{
								
							})
							this.$u.post('/order/addorder',this.orderparam).then(res=>{
								let a=res.data.msg+''
								uni.setStorageSync('ordernum',a)
								// uni.removeStorageSync('orderList')
								// uni.removeStorageSync('orderData')
								this.CLEAN_DISHES()
								if(res.data.code==200){
									uni.showToast({
										title: '支付成功',
										duration: 1000,
										icon: 'none',
										mask: true
									});
								}
								uni.removeTabBarBadge({
									index:1
								})
									uni.switchTab({
									url: '../order/order',
									animationType: 'pop-in',
									animationDuration: 200
								})},900)
						
					}else{
						uni.showToast({
							title: '密码错误',
							duration: 1000,
							icon: 'none',
							mask: true
						});
					}
					
					
				})
				
					
					
					
				
				
			}
		},
		reset() {
			this.passwordArray = []
		},
		backspace() {
			this.passwordArray.pop()
		},
		masks() {
			let _this = this
			if(!this.orderparam.type){
				return uni.showToast({
								title: '请选择就餐方式',
								duration: 1000,
								icon: 'none',
								mask: true
							});
				
			}
			this.mask = true
			setTimeout(()=> {
				_this.bott = 'bot'
			}, 50)
		},
		maskss() {
			this.mask = false
			this.bott = ''
			this.passwordArray = []
		},
		// end
	}
};
</script>

<style lang="scss">
	page{
		background-color: #eeeeee;
	}
.orderSubmit{
	margin-bottom: 150rpx;
}
.orderSubmit-submit {
	padding: 20rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #FFFFFF;
	height: 100rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;

	&>text:nth-child(2) {
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		border-radius: 40rpx;
		font-size: 28rpx;
		background-color: #4CD964;
		color: #FFFFFF;
	}
}
.password{width: 30%;flex-grow:1;padding: 3%;font-size:40upx;box-shadow:0px 0px 1upx #ccc;}
.hover{background: #eee;}
.masks{bottom:-50vh;position: fixed;background: #fff;width: 100%;transition:.5s}
.bot{bottom: 0;}
</style>
